<template>
	<view class="info-box">
		<view class="c-row">
			<view class="c-col-8">
				<view class="item">
					<text class="text-color-6 item-text1 ">姓名</text>
					<text class="item-text2 text-color-5">{{props.info.user.username}}</text>
				</view>
			</view>
			<view class="c-col-8"> 
				<view class="item">
					<text class="text-color-6  item-text1">年级</text> 
					<text class="item-text2">{{props.info.user.grade}}</text>
				</view>
			</view>
			<view class="c-col-8">
				<view class="item"> 
					<text class="text-color-6 item-text1">时长</text>
					<text class="item-text2">{{props.info.hour}}小时</text>
				</view>
			</view>
			<view class="c-col-12">
				<view class="item">
					<text class="text-color-6 item-text1">课程</text>
					<text class="item-text2">{{getreadType(props.info.category_type)}}</text>
				</view>
			</view>
			<view class="c-col-12">
				<view class="item">
					<text class="text-color-6 item-text1">日期</text>
					<text class="item-text2 text-color-3">{{props.info.day}}</text>
				</view>
			</view>
			<view class="c-col-12">
				<view class="item">
					<text class="text-color-6 item-text1">进门测</text>
					<text class="item-text2 text-color-2">{{props.info.entrance_test}}%</text>
				</view>
			</view> 
			<view class="c-col-12">
				<view class="item">
					<text class="text-color-6 item-text1">出门测</text>
					<text class="item-text2 text-color-2">{{props.info.out_test}}%</text>
				</view>
			</view>
			<view class="c-col-8">
				<view class="item">
					<text class="text-color-6 item-text1">状态 </text>
					<text class="item-text2 text-color-3"> {{props.info.state===0?'未通过':'通过'}}</text>
				</view>
			</view>
			<view class="c-col-16">
				<view class="item">
					<text class="text-color-6 item-text1">审核日期</text>
					<text class="item-text2 text-color-3">{{props.info.examine_time}} </text>
				</view>
			</view>
		</view>
		<view class="tab-box">
			<view class="tab-item-heard tab-item-1">
				<text>训练内容</text>
			</view>
			<text class="remask">{{props.info.test_content}}</text>
		</view>
		<view class="tab-box">
			<view class="tab-item-heard tab-item-2">
				<text>教练点评</text>
			</view>
			<text class="remask">{{props.info.teacher_comment}}</text>
		</view>
		<view class="tab-box">
			<view class="tab-item-heard tab-item-3">
				<text>训练作业</text>
			</view>
			<text class="remask">
				{{props.info.test_homework}}
			</text>
		</view>
	</view>
</template> 

<script setup>
	import {
		getreadType
	} from "@/utils/index.js"
	import {
		ref
	} from 'vue';
	const props = defineProps({
		info: {
			type: Object,
			default: () => {
				return []
			}
		},
	})
</script>

<style lang="scss" scoped> 
	
	.info-box {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 24rpx 40rpx; 
			width: 100vw;
		} 
	  
		.item {
			display: flex;
			align-items: center; 
	
			.item-text1 {
				font-size: 32rpx;
				line-height: 36rpx;
			}
	
			.item-text2 {
				font-size: 32rpx;
				line-height: 36rpx;
				margin-left: 30rpx;
			}
		}
	
		.view {
			margin-bottom: 40rpx;
		}
	
		.tab-box {
			display: flex;
			flex-direction: column;
			width: 100%;
		}
	
		.tab-item-heard {
			display: flex;
			align-items: center;
			width: 100%;
			height: 60rpx;
			opacity: 1;
			border-radius: 8.76px;
			padding: 0 30rpx;
	margin-top: 42rpx;
			text {
				font-size: 32rpx;
				color: #fff;
			}
		}
	
		.tab-item-1 {
			background: linear-gradient(90deg, rgba(172, 51, 193, 1) 0%, rgba(204, 204, 204, 0) 100%);
		}
	
		.tab-item-2 {
			background: linear-gradient(90deg, rgba(42, 130, 228, 1) 0%, rgba(204, 204, 204, 0) 100%);
		}
	
		.tab-item-3 {
			background: linear-gradient(90deg, rgba(0, 186, 173, 1) 0%, rgba(204, 204, 204, 0) 100%);
		}
		.tab-item-4{
			background: linear-gradient(90deg, rgba(121, 72, 234, 1) 0%, rgba(121, 72, 234, 0) 100%);
	
			
		}
		.remask{
			padding:0 30rpx;
			width: 100%;
			margin-top: 30rpx;
			text-align: justify;
		}
	text{
		font-size: 32rpx !important; 
	}
</style>